async function getArticleCates() {
  //获取分类请求
  const res = await reqArticleCatesGet()
  console.log(res)
  $('.layui-table tbody').empty()
  res.data.forEach(item => {
    let theTr = `
      <tr>
        <td>${item.name}</td>
        <td>${item.alias}</td>
        <td>
          <button data-id="${item.Id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
          <button data-id="${item.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
        </td>
      </tr>
    `
    $('.layui-table tbody').append(theTr)
  })
}
getArticleCates()

// 添加分类
let add_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>`
$('button.add').on('click', () => {
  let index = layer.open({
    type: 1, // 页面层
    content: add_str,
    area: ['500px', '300px'], // 弹出层的宽高
    title: '新增类别',
    // 弹出层展示之后即触发
    success() {
      $('#add_form').on('submit', async function (e) {
        e.preventDefault()
        // console.log($(this).serialize())
        const res = await reqAddArticleCatesPost($(this).serialize())
        console.log(res)
        const { status, message } = res
        if (status === 0) {
          layer.msg(message, { time: 1500, icon: 1 })
        } else {
          layer.msg(message, { time: 1500, icon: 2 })
        }
        // 关闭弹出层
        layer.close(index)
        // 重新渲染-不直接增加是因为要存id需要从服务器获取，用来后面删除
        getArticleCates()
      })
    },
  })
})

// 删除功能
$('.layui-table').on('click', '.delete', function () {
  layer.confirm('是否确认删除?', { icon: 3, title: '提示' }, async () => {
    const id = $(this).data('id')
    const res = await reqDeletCateGet(id)
    const { status, message } = res
    if (status === 0) {
      layer.msg(message, { time: 1500, icon: 1 })
    } else {
      layer.msg(message, { time: 1500, icon: 2 })
    }
    $(this).parents('tr').remove()
  })
})

// 编辑功能
let edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>
  `
$('.layui-table').on('click', '.edit', function () {
  let Id = $(this).data('id')
  let name = $(this).data('name')
  let alias = $(this).data('alias')
  let index = layer.open({
    type: 1,
    content: edit_str,
    title: '编辑分类',
    area: ['500px', '300px'],
    // 弹出层展示之后即触发
    success() {
      //  layui中有form.val('表单lay-filter的值', 数据)  --设置
      //  layui中有form.val('表单lay-filter的值')     --取值
      form.val('edit', {
        Id,
        name,
        alias,
      })
      $('#edit_form').on('submit', async function (e) {
        e.preventDefault()
        const res = await reqUpdateCatePost($(this).serialize())
        console.log(res)
        const {status, message} = res
        if (status === 0) {
          layer.msg(message, { time: 1500, icon: 1 })
        } else {
          layer.msg(message, { time: 1500, icon: 2 })
        }
        // 关闭弹出层
        layer.close(index)
        // 重新渲染
        getArticleCates()
      })
    },
  })
})
